<template>
  <div id="app">


    <el-form label-width="120px" style="margin-top: 20px" :inline="true">

      <el-form-item label="派车单号：">
        <el-input placeholder="请输入派车单号"></el-input>
      </el-form-item>

      <el-form-item label="承运商：">
        <el-input placeholder="请输入承运商名称"></el-input>
      </el-form-item>

      <el-form-item label="车辆类型：">
        <el-input placeholder="货车"></el-input>
      </el-form-item>

      <el-form-item label="路线：">
        <el-input placeholder="上海-深圳"></el-input>
      </el-form-item>


        <el-button type="primary" icon="el-icon-search">搜索</el-button>
        <el-button @click="">重置</el-button>


    </el-form>

    <el-divider></el-divider>



    <el-table
      :data="dispatchs"
      ref="arr"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="">
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>

      <el-table-column
        prop="dispatchId"
        label="派车单号">
      </el-table-column>

      <el-table-column
        prop="dispatchRoute"
        label="路线 ">
      </el-table-column>

      <el-table-column
        prop="dispatchAppointTime"
        label="指派时间">
      </el-table-column>

      <el-table-column
        prop="dispatchCarType"
        label="车辆类型">
      </el-table-column>

      <el-table-column
        prop="dispatchCarCarrier"
        label="承运商">
      </el-table-column>

      <el-table-column
        prop="dispatchCarPlate"
        label="车牌">
      </el-table-column>

      <el-table-column
        prop="dispatchCarDriver"
        label="司机">
      </el-table-column>

      <el-table-column
        prop="dispatchOrderStatus"
        label="状态">
        <template slot-scope="scope">
          <el-tag :type="scope.row.dispatchOrderStatus == 1 ? 'danger' : 'primary'"
          >{{scope.row.dispatchOrderStatus == 1 ? '异常' : '正常'}}</el-tag>
        </template>
      </el-table-column>

      <el-table-column
        fixed="right"
        label="操作">
        <template slot-scope="scope">
          <el-button @click="queryDispatchCenter(scope.row)" size="small" type="primary">查看</el-button>
        </template>
      </el-table-column>

    </el-table>

    <!--    分页插件-->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="pageSizes"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>

<!--    异常登记弹窗-->
    <el-dialog :visible.sync="dialogFormVisible" style="width: 2100px" title="异常登记">

      <h2>派车单信息</h2>
      <el-table :data="dispatchCenter">
        <el-table-column prop="dispatchId" label="派车单号" width="100"></el-table-column>
        <el-table-column prop="dispatchOrderId" label="客户单号" width="100"></el-table-column>
        <el-table-column prop="dispatchRoute" label="路线" width="100"></el-table-column>
        <el-table-column prop="dispatchAppointTime" label="指派时间" width="100"></el-table-column>
        <el-table-column prop="dispatchCarType" label="车辆类型" width="100"></el-table-column>
        <el-table-column prop="dispatchCarCarrier" label="承运商" width="100"></el-table-column>
        <el-table-column prop="dispatchCarPlate" label="车辆" width="100"></el-table-column>
        <el-table-column prop="dispatchCarDriver" label="司机" width="100"></el-table-column>
        <el-table-column prop="rtime" label="回单时间" width="100"></el-table-column>
      </el-table>

      <hr>
      <br>

      <h2>异常信息</h2>
      <el-form :inline="true" class="demo-form-inline" >
        <el-form-item label="当前节点" :label-width="formLabelWidth">
          <el-input autocomplete="off" v-model="exceptionRegistration.node"></el-input>
        </el-form-item>

        <el-form-item label="异常类型" :label-width="formLabelWidth">
          <el-input autocomplete="off" v-model="exceptionRegistration.exceptionType"></el-input>
        </el-form-item>
      </el-form>

      <el-form :inline="true" class="demo-form-inline" >
        <el-form-item :label-width="formLabelWidth" disabled label="反馈人">
          <el-input autocomplete="off" v-model="exceptionRegistration.name"></el-input>
        </el-form-item>

        <el-form-item class="block" label="发现时间" :label-width="formLabelWidth">
          <el-date-picker
            v-model="exceptionRegistration.discoveryTime"
            type="date"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
      </el-form>

      <el-form :inline="true" class="demo-form-inline" >
        <el-form-item label="反馈方式" :label-width="formLabelWidth">
          <el-input autocomplete="off" v-model="exceptionRegistration.feedbackMode"></el-input>
        </el-form-item>

        <el-form-item class="block" label="反馈时间" :label-width="formLabelWidth">
          <el-date-picker
            v-model="exceptionRegistration.createdTime"
            type="date"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
      </el-form>

      <el-form >
        <el-form-item :label-width="formLabelWidth" label="异常说明">
          <el-input autocomplete="off" v-model="exceptionRegistration.exceptionDesc"></el-input>
        </el-form-item>
      </el-form>

      <el-button @click="dialogFormVisible=false" size="small" type="primary" style="margin-left: 450px">关闭</el-button>
      <el-button @click="addExceptionInfo" size="small" type="primary" >确认</el-button>


    </el-dialog>

  </div>
</template>

<script>
  export default {
    data() {
      return {
        //分页
        currentPage: 1,
        pageSize: 2,
        pageSizes: [10, 20, 30],
        total: 0,
        dispatchs:[],
        //弹窗
        dialogFormVisible:false,
        exceptionRegistration:{},
        formLabelWidth:"120px",
        dispatchCenter:[],

      }
    },
    methods: {
      //弹窗数据展示
      queryDispatchCenter(row){
        this.dialogFormVisible=true;
        this.$http({
          method:"get",
          url:"http://localhost/track/"+row.dispatchId
        }).then(resp=>{
          this.dispatchCenter = resp.data.data;
        })
      },
      //异常登记方法
      addExceptionInfo(){
        this.exceptionRegistration.oId=this.dispatchCenter[0].dispatchOrderId;
        this.exceptionRegistration.cId=this.dispatchCenter[0].dispatchId;
        this.$http({
          method: "post",
          url:"http://localhost/exceptionRegistration",
          data:this.exceptionRegistration
        }).then(resp=>{
          this.dialogFormVisible=false;
          this.$message({
            showClose: true,
            message: '登记成功',
            type: 'success'
          });
          this.findDispatchs(1,2);
        })
      },
      //数据展示
      findDispatchs(currentPage,pageSize){
        this.$http({
          method:"GET",
          url:"http://localhost/track",
          params:{
            currentPage:currentPage,
            pageSize:pageSize
          }
        }).then(resp=>{
          console.log(resp.data);
          this.dispatchs = resp.data.data.list;
          this.total = resp.data.data.total;
        })
      },
      search(){
        this.findDispatchs(this.currentPage,this.pageSize)
      },
      //分页
      handleCurrentChange(val){
        this.currentPage = val;
        this.findDispatchs(this.currentPage,this.pageSize)
      },
      handleSizeChange(val){
        this.pageSize = val;
        this.findDispatchs(this.currentPage,this.pageSize)
      },
    },
    created() {
      this.findDispatchs(this.currentPage,this.pageSize)
    },
  }
</script>

<style scoped>

  .el-divider {
    margin: 8px 0;
    background: 0 0;
    border-top: 10px solid #E6EBF5;
  }

  .div1{
    margin-left:40px;
    border-bottom: 1px;
  }

</style>
